<template>
  <div>
    <div class="header-select">
      <el-select v-model="valueTime" class="m-2 select-year" placeholder="Select">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
      <el-select v-model="valueCompany" class="m-2 select-company" placeholder="Select">
        <el-option v-for="item in optionsCopy" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
    </div>
    <div class="results-content">
      <el-row>
        <el-col :span="6" v-for="(item, index) in cardItem" :key="index"
          ><div class="results-card">
            <div class="results-left">
              <div class="results-word">{{ item.title }}</div>
              <div class="result-number">{{ item.number }}</div>
            </div>
            <div class="results-right">
              <img :src="item.src" />
            </div></div
        ></el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import money from '@/assets/images/home/audit-results/money.png';
import amount from '@/assets/images/home/audit-results/amount.png';
import economy from '@/assets/images/home/audit-results/economy.png';
import manage from '@/assets/images/home/audit-results/manage.png';
import problem from '@/assets/images/home/audit-results/problem.png';
import recommendation from '@/assets/images/home/audit-results/recommendation.png';
export default {
  data() {
    return {
      valueTime: '2019',
      valueCompany: '集团',
      options: [
        {
          value: '2019',
          label: '2019',
        },
        {
          value: '2020',
          label: '2020',
        },
        {
          value: '2021',
          label: '2021',
        },
        {
          value: '2022',
          label: '2022',
        },
        {
          value: '2023',
          label: '2023',
        },
      ],
      optionsCopy: [
        {
          value: '集团',
          label: '集团',
        },
        {
          value: '上市公司',
          label: '上市公司',
        },
        {
          value: '民营企业',
          label: '民营企业',
        },
      ],
      cardItem: [
        {
          title: '审计金额（万元）',
          number: '2,000,000',
          src: money,
        },
        {
          title: '查出问题（个）',
          number: '32',
          src: problem,
        },
        {
          title: '涉及问题金额（万元）',
          number: '24000,000',
          src: amount,
        },
        {
          title: '提出审计建议（个）',
          number: '4',
          src: recommendation,
        },
        {
          title: '促进管理提升（项）',
          number: '10',
          src: manage,
        },
        {
          title: '直接经济成果（万元）',
          number: '1,000,000',
          src: economy,
        },
      ],
    };
  },
};
</script>

<style scoped lang="scss">
.header-select {
  text-align: right;
  margin-bottom: 7px;
}
:deep(.el-select) {
  width: 100px;
}
:deep(.el-input__wrapper) {
  height: 26px;
}
.select-year {
  margin-right: 10px;
}
.select-company {
  margin-right: 24px;
}
.results-content {
  width: 1172px;
  padding: 18px 0 0 22px;
  height: 260px;
  box-sizing: border-box;
  .results-card {
    width: 265px;
    height: 97px;
    background: #f5f7fb;
    border-radius: 2px;
    margin-bottom: 8px;
    display: flex;
    justify-content: space-between;
    .results-left {
      padding: 25px 0 26px 24px;
      .results-word {
        font-size: 14px;
      }
      .result-number {
        font-size: 20px;
        font-weight: 700;
      }
    }
    .results-right {
      width: 48px;
      height: 48px;
      padding: 29px 24px 20px 0;
    }
  }
}
</style>
